<template>
	<view class="section">
		<view class="nav-left">
			<scroll-view scroll-y class="nav-left-scroll">
				<view class="nav-left-item" v-for="(item,index) in categoryList" @click="categoryClickMain(item,index)"
					:key="index"
					:style="index==categoryActive?'color:'+activeTextColor+'; border-left: 4px solid #3DA77F; background-color:'+activeBackgroundColor:''">
					{{ item[label] }}
				</view>
				<view class="empty" v-if="categoryList.length===0">暂无科室数据</view>
			</scroll-view>
		</view>
		<view class="nav-right">
			<scroll-view scroll-y class="nav-right-scroll" :scroll-top="scrollTop" @scroll="scroll">
				<template v-if="subNode1">
					<view class="description">普通号</view>
					<!-- <view class="line1"></view> -->
					<view class="description-detail">
						<!--            医保和自费均可使用。医保用户请用医保卡或医保电子凭证在自助机取号-->
					</view>
					<view class="nav-right-item" v-for="(item1,index) in categoryListObj.ordinaryDeptList" :key="index"
						@click="categoryClickSub(item1)">
						<view class="item-label">{{ item1[label_sub] }}</view>
					</view>
				</template>

				<template v-if="subNode2">
					<view class="description">特需号</view>
					<view class="description-detail">
						<!--            医保和自费用户均可使用。商业保险客户请电话预约(69079666)或者现场预约-->
					</view>
					<view class="nav-right-item" v-for="(item2,index2) in categoryListObj.specialDemandsDeptList"
						:key="index2" @click="categoryClickSub(item2)">
						<view class="item-label">{{ item2[label_sub] }}</view>
					</view>
				</template>

				<template v-if="subNode3">
					<view class="description">VIP号</view>
					<view class="description-detail">
						<!--            商业保险客户请电话预约(69079666)或者现场预约。预约时间:08:00-20:00-->
					</view>
					<view class="nav-right-item" v-for="(item3,index) in categoryListObj.vipDeptList"
						:key="index" @click="categoryClickSub(item3)">
						<view class="item-label">{{ item3[label_sub] }}</view>
					</view>
				</template>
				<view class="empty" v-if="subNoData">暂无数据</view>
			</scroll-view>

		</view>
	</view>
</template>

<script>
	// import deptList from '@/components/department-data'
	import requestV2 from '@/utils/request'
	export default {
		name: "departmentList",
		data() {
			return {
				scrollHeight: 0,
				categoryActive: 0,
				categoryList: [], //主分类List
				categoryListObj: {
					ordinaryDeptList: [],
					specialDemandsDeptList: [],
					vipDeptList: []
				},
				// topHeight: 0,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				defaultActive: 0,
				activeTextColor: '#6A6969',
				activeBackgroundColor: '#fff',
				label: 'parentDeptName',
				label_sub: 'deptName'
			}
		},
		props: {

		},
		mounted() {
			this.init()
		},
		computed: {
			subNoData() {
				return this.categoryListObj.ordinaryDeptList === 0 &&
					this.categoryListObj.specialDemandsDeptList === 0 &&
					this.categoryListObj.vipDeptList === 0
			},
			subNode1() {
				let temp1 = this.categoryListObj.ordinaryDeptList || []
				return temp1.length > 0
			},
			subNode2() {
				let temp2 = this.categoryListObj.specialDemandsDeptList || []
				return temp2.length > 0
			},
			subNode3() {
				let temp3 = this.categoryListObj.vipDeptList || []
				return temp3.length > 0
			},
		},
		methods: {
			//拉取数据
			async init() {
				let payload = {
					service: 'smarthos.aiyuhua.gh.dept.list',
					bookType: '0'
				}
				let res = await requestV2.post(payload)
				if (res.code === '0') {
					const deptList = res.list
					this.categoryActive = this.defaultActive
					this.categoryList = deptList || [];
					if (deptList && deptList[0]) {
						this.categoryListObj = deptList[0]
					}
				} else {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: res.data.msg
					});
				}
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			categoryClickMain(item, index) {
				console.log(`======categoryClickMain(category, index) {=======>`, item, index)
				if (item.deptCode === "89") {
					uni.showToast({
						title: item.emergencyDeptInfoMsg,
						icon: 'none',
						duration: 3000
					});
				} else {
					this.categoryActive = index;
					this.categoryListObj = item
					this.scrollTop = this.old.scrollTop
					this.$nextTick(function() {
						this.scrollTop = 0
					});
				}
			},
			categoryClickSub(category) {
				this.$emit('categorySubClick', category)
			}
		},
	}
</script>

<style scoped lang="scss">
	.section {
		width: 100%;
		display: flex;

		.nav-left {
			width: 40%;
			// height: calc(100vh - 50px);
			background: #F7F6F6;

			.nav-left-scroll {
				height: calc(100vh - 50px);

				.nav-left-item {
					height: 50px;
					font-size: 16px;
					display: flex;
					align-items: center;
					justify-content: center;
					color: #666;
				}
			}

		}

		.nav-right {
			width: 60%;
			padding: 0 15px;

			.nav-right-scroll {
				height: calc(100vh - 50px);

				.description {
					padding: 10px;
					border-bottom: 2px solid #3DA77F;
					font-weight: bold;
					color: #3DA77F;
					width: 80px;
				}

				.description-detail {
					font-size: 14px;
					color: #3DA77F;
					padding: 5px 0;
					//border-top: 2px solid #3DA77F;
				}

				.line1 {
					border-bottom: 2px solid #3DA77F;
				}

				.nav-right-item {
					width: 100%;
					float: left;
					text-align: left;
					padding: 5px;
					font-size: 16px;
					line-height: 40px;
					color: #333;

					.item-label {
						line-height: 40px;
						// padding-left: 15px;
					}
				}
			}
		}
	}
</style>